﻿/*-----------------HTML格式---------------------

 <div>   --- this is dom
 <div>歌词1</div>
 <div>歌词2</div>
 <div class="current">歌词3</div>  -- 当前歌词
 <div>歌词4</div>
 <div>歌词5</div>
 </div>

 ---------------------------------------------*/


/**
 * 一个显示歌词元素的View
 * @param config
 * dom        Jquery Html Dom
 * height     可视区域的高
 * count      一次可显示的歌词行数, 最好能整除: count | height
 * lrcs       一个数组,储存的是歌词,元素类型是LrcModel
 */
function LrcView(config) {
    this.config = config;
    this._init();
    this.current = -1;
}


LrcView.prototype._init = function () {

    // 有关参数
    var me = this;
    var dom = this.config.dom;
    var height = this.config.height;
    var lrcs = this.config.lrcs;
    var count = this.config.count;
    var text = this.config.text;

    // 清空初始化
    dom.css('height', height)
        .css('width', 400)
        .css('position', 'absolute')
        .css('overflow', 'hidden')
        .css('left', 0)
        .css('top', 0)
        .css('z-index', 9999)
        .html('');
    if (text) {
        dom.text(text);
        return;
    }

    // dom是一个视口, wrap封装所有数据
    var wrap = $('<div></div>').appendTo(dom).css({
        position: 'absolute',
        left: 0,
        top: height / count * Math.floor((count + 1) / 2),
        'z-index': 999999
    });

    // 插入数据
    $(lrcs).each(function (i) {
        $('<div></div>').text(lrcs[i].text).appendTo(wrap).css({
            height: height / count
        });
    });
}


LrcView.prototype.next = function (index) {
    var wrap = this.config.dom.find('div:eq(0)');
    wrap.css({
        top: this.config.height / this.config.count * Math.floor((this.config.count + 1) / 2)
            - (index) * this.config.height / this.config.count
    })
    wrap.find('div:eq(' + this.current + ')').removeClass('current')
    wrap.find('div:eq(' + index + ')').addClass('current');
    this.current = index;
}